<template>
	<el-card>
		<div class="arrange-panel-header">
			<div class="class-profiles">
				<div class="title">{{heardTitle}}</div>
			</div>
			<el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
		</div>
		<div style="margin-top: 24px;">
			<el-form :model="coursesForm" label-position="right" label-width="80px" label-suffix=":">
				<el-row :gutter="24">
					<el-col :span="24">
						<el-form-item class="float-right no-bottom no-right">
							<el-button @click="resetCoursesForm">{{$t("message.reset")}}</el-button>
							<el-button type="primary" @click="getCoursesMaintain()">{{$t("message.filter")}}</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="8">                        
						<el-form-item :label="$t('courseTake.openFaculty')">
							<el-select v-model="coursesForm.faculty" style="width: 100%;">
								<el-option
									v-for="item in options.college"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('label.trainingLevel')">
							<el-select v-model="coursesForm.trainingLevel" style="width: 100%;">
								<el-option
									v-for="item in options.trainingLevel"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('course.courseTag')">
							<el-select v-model="coursesForm.tag" style="width: 100%;">
								<el-option
									v-for="item in options.courseLabel"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div style="border-top:1px solid #ccc;height:1px;margin-bottom:20px"></div>
		<div class="edu-opertion-bar">
			<div class="float-left">
				<el-input
					v-model="coursesForm.condition"                   
					 :placeholder="$t('courses.searchCourseList')"
					style="width:200px"
					@keyup.enter.native="getCoursesMaintain()"
				>
					<i
						class="el-icon-search"
						slot="suffix"
						style="margin-top:10px;cursor:pointer"
						@click="getCoursesMaintain()"
					></i>
				</el-input>
			</div>
			<div class="float-right">
				<el-button type="danger" @click="batchDeleteCourseMain">{{$t("message.delete")}}</el-button>
				<el-button @click="batchAddTag">{{$t('course.addTag')}}</el-button>
				<el-button type="primary" @click="addCourse">{{$t('course.addCourse')}}</el-button>
			</div>
		</div>
		<edu-table
			:data="coursesMaintain"
			@selection-change="chooseCourseMaintain"
			@page-change="handleCurrentChange_"
			:total="coursesForm.total_"
			:pageSize="coursesForm.pageSize_"
			:current-page="coursesForm.pageNum_"
		>
			<edu-table-column prop="facultyI18n" :label="$t('label.openClassCollege')"></edu-table-column>
			<edu-table-column prop="code" :label="$t('course.courseCode')"></edu-table-column>
			<edu-table-column prop="name" :label="$t('course.courseName')"></edu-table-column>
			<edu-table-column prop="credits" :label="$t('course.score')"></edu-table-column>
			<edu-table-column prop="period" :label="$t('courses.classHour')"></edu-table-column>
			<edu-table-column prop="weeks" :label="$t('label.totalWeek')"></edu-table-column>
			<edu-table-column prop="weekHour" :label="$t('course.weekHour')"></edu-table-column>
			<edu-table-column :label="$t('course.tag')" prop="tagI18n" />
			<edu-table-column :label="$t('message.operating')">
				<template slot-scope="scope">
					<el-button type="text" @click="editCourseMaintain(scope.row.id)">{{$t("message.edit")}}</el-button>
					<el-button type="text" @click="deleteCourseMaintain(scope.row.id)">{{$t("message.delete")}}</el-button>
				</template>
			</edu-table-column>
		</edu-table>
       
		 <el-dialog :title="$t('courses.eidtLabel')" :visible.sync="courseTagDialog" width="600px" v-drag-dialog>
			<el-form :model="courseEditForm" label-position="right" label-width="80px" label-suffix=":">
				<el-row :gutter="24">
					<el-col :span="16">
						 <el-form-item :label="$t('courses.label')">
							<el-select v-model="courseEditForm.tag" multiple style="width: 100%;">
								<el-option
									v-for="item in options.courseLabel"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="24">
						<el-form-item class="float-right no-bottom no-right">
							<el-button @click="cancelEditDialog">{{$t("message.cancel")}}</el-button>
							<el-button type="primary" @click="saveCourse">{{$t("message.save")}}</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>

		<!-- 添加标签 -->
	  <el-dialog :title="$t('courses.addLabel')" :visible.sync="addTagDialog" width="600px" v-drag-dialog>
			<el-form label-position="right" label-width="80px" label-suffix=":">
				<el-row>
					<el-col :span="16">
						  <el-form-item :label="$t('courses.label')">
							<el-select v-model="batchTags" multiple style="width: 100%;">
								<el-option
									v-for="item in options.courseLabel"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item class="float-right no-bottom no-right">
							<el-button @click="cancelBatchTagDialog">{{$t("message.cancel")}}</el-button>
							<el-button type="primary" @click="saveBatchTag">{{$t("message.save")}}</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</el-card>
</template>
<script>
import {
	batchSaveTags,
	getCourseInfoById,
	EditCourse,
	deleteCourses,
	getCoursesByCondition
} from "common/src/api/resource/publicCourse";

export default {
	name: "CourseMaintenanceComponent",
	props: {
		heardTitle: {
			type: String
		},
		options: {
			type: Object
		}
	},
	data() {
		return {
			categoryId: "",
			coursesForm: {
				pageNum_: 1,
				pageSize_: 20,
				categoryId: "",
				// term: "",
				tag: "",
				type: 1,
				trainingLevel: "",
				faculty: "",
				condition: "",
				total: 0
			},
			courseEditForm: {
				id: 0,
				courseCode: 0,
				categoryId: 0,
				// term: 0,
				tag: "",
				type: 1
			},
			coursesMaintain: [],
			chooseCoursesMaintain: [], //选中的维护课程列表
			courseTagDialog: false,
			addTagDialog: false,
			batchTags: []
		};
	},
	created() {
		//this.init();
	},
	computed: {},
	methods: {
		getTagTextByValues(values) {
			let text = "";
			if (values) {
				let tags = values.split(",");
				let array = [];
				tags.forEach((t, index) => {
					let tag = this.options.courseLabel.find(c => c.value == t);
					if (tag) {
						array.push(tag.label);
					}
				});
				text = array.join(",");
			}
			return text;
		},
		handleCurrentChange_(val) {
			this.coursesForm.pageSize_ = val.pageSize;
			this.coursesForm.pageNum_ = val.pageNum;
			this.getCoursesMaintain();
		},

		batchAddTag() {
			if (this.chooseCoursesMaintain.length == 0) {
				this.$message({
					type: "info",                  
					message: this.$t('courses.plsChooseLabel')
				});
				return;
			}
			this.addTagDialog = true;
			this.batchTags = [];
		},
		//取消批量标签
		cancelBatchTagDialog() {
			this.addTagDialog = false;
		},

		chooseCourseMaintain(val) {
			this.chooseCoursesMaintain = val;
		},

		getCoursesMaintain(id) {
			if (id) {
				this.categoryId = id;
				this.resetCoursesForm();
			}
			this.coursesForm.categoryId = this.categoryId;

			getCoursesByCondition(this.coursesForm).then(res => {
				if (res.code == 200) {
					this.coursesForm.total_ = res.data.total_;
					this.coursesMaintain = res.data.list;
				}
			});
		},

		//保存批量标签
		saveBatchTag() {
			if (this.batchTags.length == 0) {
				this.$message({
					type: "info",                    
					message: this.$t('courses.plsChooseAddLabel')
				});
			}
			let data = {
				tag: this.batchTags.join(",") + ",",
				ids: this.chooseCoursesMaintain.map(c => c.id)
			};
			batchSaveTags(data).then(res => {
				if (res.code == 200) {
					this.addTagDialog = false;
					this.getCoursesMaintain();
				}
			});
		},

		batchDeleteCourseMain() {
			if (this.chooseCoursesMaintain.length == 0) {
				this.$noSelectAlert();
				// this.$message({
				// 	type: "info",
				// 	message: this.$t('courses.plsChooseDelCourse')
				// });
				return;
			}
			// this.$confirm(
			// 	this.$t("message.deleteConfirm"),
			// 	this.$t("message.confirm"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteCourses({
					ids: this.chooseCoursesMaintain.map(c => c.id)
				}).then(res => {
					if (res.code == 200) this.getCoursesMaintain();
				});
			});
		},

		deleteCourseMaintain(id) {
			// this.$confirm(
			// 	this.$t("message.deleteConfirm"),
			// 	this.$t("message.confirm"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteCourses({ ids: [id] }).then(res => {
					if (res.code == 200) this.getCoursesMaintain();
				});
			});
		},

		editCourseMaintain(id) {
			this.courseEditForm.id = id;
			this.courseEditForm.tag = [];
			this.courseEditForm.term = "";
			getCourseInfoById(id).then(res => {
				if (res.code == 200) {
					this.courseEditForm.categoryId = res.data.categoryId;
					this.courseEditForm.id = res.data.id;
					this.courseEditForm.courseCode = res.data.courseCode;
					if (res.data.tag) {
						this.courseEditForm.tag = res.data.tag
							.split(",")
							.filter(c => c);
					}
					this.courseEditForm.term = res.data.term;
					this.courseTagDialog = true;
				}
			});
		},

		cancelEditDialog() {
			this.courseTagDialog = false;
		},
		//保存编辑课程
		saveCourse() {
			let data = _.cloneDeep(this.courseEditForm);
			if (this.courseEditForm.tag.length > 0) {
				data.tag = this.courseEditForm.tag.join(",") + ",";
			} else {
				data.tag = "";
			}
			EditCourse(data).then(res => {
				if (res.code == 200) {
					this.courseTagDialog = false;
					this.getCoursesMaintain();
				}
			});
		},

		resetCoursesForm() {
			this.coursesForm.term = "";
			this.coursesForm.tag = "";
			this.coursesForm.trainingLevel = "";
			this.coursesForm.faculty = "";
			this.coursesForm.condition = "";
		},
		addCourse() {
			this.$emit("addCourseBread", this.categoryId);
		},

		back() {
			this.$emit("back", "maintenance");
		}
	}
};
</script>

<style lang="scss" scoped>
.arrange-panel-header {
	height: 56px;
	border-bottom: 2px solid #dcdfe6;
	cursor: default;
	.title {
		font-size: 20px;
		color: #000;
		font-weight: bold;
	}
	.class-profiles {
		float: left;
		width: 40%;
		div {
			padding: 5px 0;
		}
	}
}
</style>

